<template>
    <ul class="list">
        <li class="item" 
        v-for="item of letters"
         :key="item"
         :ref="item"
         @touchstart="handtouchStart"
         @touchmove="handtouchMove"
         @touchEnd="handtouchEnd"
         @click="handleLetterClick"
         >
            {{ item }}
        </li>
    </ul>
</template>
<script>
export default {
    name:'CityAlphabet',
    props:{
        cities:Object
    } ,
    computed:{
        letters () {
            const letters = []
            for (let i in this.cities){
                letters.push(i)
            }
            return letters
        }
    },
    data () {
        return{
            touchStatus: false,
            startY:0,
            timer: null
        }
    },
    updated(){
        this.startY = this.$refs['A'][0].offsetTop
    },
    methods: {
        handleLetterClick (e) {
            this.$emit('change',e.target.innerText)
           
        },
        handtouchStart () {
            this.touchStatus=true
        },
        handtouchMove (e) {
            if(this.touchStatus){
                if(this.timer){
                    clearTimeout(this.timer)
                }
                this.timer=setTimeout(()=>{
                     const touchY = e.touches[0].clientY-79
                const index = Math.floor((touchY-this.startY)/20)
                if(index>= 0 && index < this.letters.length){
                     this.$emit('change', this.letters[index])
                }
                },16)
            }
        },
        handtouchEnd () {
            this.touchStatus=false
        }
    }
}
</script>
<style lang="stylus" scoped>
 @import '~styles/varibles.styl'
.list
    display flex
    flex-direction column
    justify-content center 
    position absolute
    top 1.58rem
    right 0
    bottom 0
    width .4rem

.item
    line-height .44rem
    text-align center
    color $bgColor
</style>
